<template>
    <div class="chapter">
        <div class="header" style="height:205px"></div>
        <!-- 主体 -->
        <div class="main-box">
            <div class="header">
                <h3 class="title">进度载入</h3>
                <el-breadcrumb class="other">
                    <el-breadcrumb-item :to="{ path: '/studyCenter' }">学习中心</el-breadcrumb-item>
                    <el-breadcrumb-item>进度载入</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="content">
                <el-table class="list-table" :data="tableData" stripe style="width: 100%" width="180">
                    <el-table-column prop="date" label="进度名称">
                        <template slot-scope="scope">
                            <div style="text-align:center;">{{ scope.row.name }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="试卷名称" >
                        <template slot-scope="scope">
                            <div style="text-align:center;">{{ scope.row.paperName }}</div>
                            <!-- <div style="margin-left: 10px;" v-else>{{ scope.row.name }}</div> -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="试卷类型" width="120">
                        <template slot-scope="scope">
                            <div style="text-align:center;">{{ scope.row.type }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="保存时间" width="180">
                        <template slot-scope="scope">
                            <div style="text-align:center;">{{ scope.row.createTime }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="完成度" width="120">
                        <template slot-scope="scope">
                            <div style="text-align:center;">{{ scope.row.processItemCount}}/{{scope.row.itemCount}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" >
                        <template slot-scope="scope">
                            <div style="display:flex;">
                                <el-button
                                    @click="handleChapterItemClick(scope.row,'goExam')"
                                    type="text"
                                    size="small"
                                    class="operateBtn"
                                >继续考试</el-button>
                                <el-button
                                    @click="handleChapterItemClick(scope.row,'removeExam')"
                                    type="text"
                                    size="small"
                                    class="operateBtn"
                                    style="background:#ddd!important;border:none;color:#111"
                                >删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="content-footer">
                    <div class="recordSum">共{{total}}条记录</div>
                </div>
            </div>
        </div>
        <!-- <Footer></Footer> -->
    </div>
</template>
<style lang="scss" scoped>
.chapter {
    display:flex;
    flex-direction: column;
    min-height: calc(100vh - 40px);
  background-image: url();
  .main-box {
    flex-grow:1;
    //列表盒子
    .content {
      //列表内容
      .list-table {
        .scope-icon {
          padding: 2px 8px;
          background-color: #f37b1d;
          border-radius: 2px;
          color: #fff;
          font-size: 10px;
          font-weight: bold;
        }
      }
      .operateBtn {
        padding: 8px 12px;
        color: #fff;
        background-color: #3bb4f2;
        border-color: #3bb4f2;
        border-radius: 14px;
      }
      .list-table {
        .has-gutter tr th {
          background: #f9f9f9;
          border-top: 1px solid #ddd;
          border-bottom: 1px solid #ddd;
          .cell {
            color: #333;
            text-align: center;
          }
        }
      }
      .content-footer {
          padding-top:20px;
        .recordSum {
          color: #999;
          font-size: 14px;
        }
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    width: 1210px;
    margin: 30px auto;
    padding: 10px 20px;
    background: white;
    box-shadow: 0px 0px 6px #888888;
    .header {
      //列表头部
      padding-top: 26px;
      display: flex;
      align-items: center;
      .title {
        font-weight: 600;
        font-size: 20px;
      }
      .other {
        margin: -8px 0 0 20px;
        .el-breadcrumb__item:last-child .el-breadcrumb__inner,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
          color: #0e90d2;
        }
        .is-link {
          color: #0e90d2;
        }
      }
    }
  }
}
// 修改element 样式
.el-pager li.active {
  background-color: #409eff;
  cursor: default;
  color: white !important;
}
.el-pager li {
  border: 1px solid #ccc;
  margin-right: 5px !important;
}
.el-pager li.active + li {
  border: 1px solid #ccc !important;
}

</style>
<script>
import Header from "../../../components/common/header.vue";
import Footer from "../../../components/common/footer.vue";
import eventBus from '../../../utils/eventBus.js'
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      total: 0, //总共条数
      tableData: [
        //表数据
      ]
    };
  },
  created(){
    this.getProgressList();
  },
  mounted(){
    eventBus.$on('requestList',()=>{
      this.getProgressList()
    })
  },
  methods: {
    crtTimeFtt(val) {//格式化时间
        if (val != null) {
            var date = new Date(val);
            return this.myformatter(date.getFullYear()) + '-' + this.myformatter((date.getMonth() + 1)) + '-' + this.myformatter(date.getDate()) + ' ' + this.myformatter(date.getHours()) + ':' + this.myformatter(date.getMinutes()) + ':' + this.myformatter(date.getSeconds());
        }
    },
    myformatter(val){//补位
        if(val<10){
            return '0'+ val
        }else{
            return val;
        }
    },
      getProgressList(){//获取数据
        this.$get('/api/v1/paper_progress',{
            pageNumber:0,
            pageSize:10,
            subjectId:localStorage.getItem('categoryId'),
        }).then(res=>{;
            if(res.code!=200){
                this.$message({
                    message: res.msg,
                    type: 'warning'
                });
            }else{
                this.tableData=res.data;
                this.total=res.totalCount;
                this.tableData.forEach(item=>{
                    item.createTime = this.crtTimeFtt(item.createTime )
                     if (item.paperType=='0') {
                        item.type='章节练习';
                    } else if (item.type == "1") {
                        item.paperType = "历年真题";
                    }else if(item.paperType == '2'){
                        item.type="模拟考试";
                    }
                })
            }
        })
      },
    handleChapterItemClick(idx,fangx) {
      console.log(idx)
      if(fangx=='goExam'){
        switch(idx.paperType){
          case '0':
            // this.$message('正在开发敬请期待')
            let routerss = this.$router.resolve({
              path: "/chapter",
              query: {
                page:'chapter',
                id: idx.paperId,
                progressID:idx.id,
                entrance:'jindu'
              }
            })
            window.open(routerss.href, '_blank');
            break;
            case '1':
            // this.$message('正在开发敬请期待')
            let routersss = this.$router.resolve({
              path: "/chapter",
              query: {
                page:'chapter',
                id: idx.paperId,
                progressID:idx.id,
                entrance:'jindu',
                paperName:idx.paperName
              }
            })
            window.open(routersss.href, '_blank');
            break;
          case '2':
            let path = '/enter'
            if(localStorage.getItem("subjectName") != '注册会计师'){
              path = '/intermediateExam'
            }
            let routerUrl = this.$router.resolve({
              path: path,
              query: {
                id: idx.paperId,
                progressID:idx.id
              }
            })
            window.open(routerUrl.href, '_blank');
          break;
        }
      }else{
        this.$Delete(`/api/v1/paper_progress/${idx.id}`,{

        }).then(res=>{
          if(res.code!=200){
            this.$message({
              type:'warning',
              message:res.msg
            })
          }else{
            this.$message({
              type:'success',
              message:'删除成功'
            })
            this.getProgressList();
          }
        })
      }
      // this.$router.push({
      //   path: "/enter",
      //   params: {
      //     id: 1
      //   }
      // });
    }
  }
};
</script>


